<template>
  <span style="padding-left:10px">
    <el-button :size="size" :type="type" @click="deleteRole">
      <fa-icon v-show="icon" class="el-icon-delete" />{{title}}</el-button>
  </span>
</template>

<script>
import api from '../api'
import { CONSTANT_OBJ } from '@/utils/constant'
export default {
  props: {
    roleData: Object,
    title: String,
    icon: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 删除
    deleteRole () {
      const { roleData } = this
      if (roleData.peopleNum > 0) {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '<strong>职务无法删除</strong><div>职务有成员时无法删除</div>',
          type: 'error'
        })
      } else {
        this.$confirm(`<div style="padding-left: 50px"><strong style="font-size: 16px">删除职务确认</strong><div>请确认是否删除 ${roleData.roleName}（${roleData.roleCode}） 职务？</div></div>`, '确认提示', {
          dangerouslyUseHTMLString: true
        }).then(() => {
          api.deleteRoleData(roleData.roleId).then(res => {
            const { responseCode, responseMsg } = res
            if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
              this.$message({
                message: `${responseMsg}`,
                type: 'success'
              })
              this.$emit('uppdataSuccess', 'delete')
            }
          })
        })
      }
    }
  }
}
</script>
